<template>
  <div class="error">
    <button @click="back">点击返回上一页{{ num }}</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref,onBeforeUnmount } from 'vue'
const num = ref(5)
const router = useRouter()
const back = () => {
  router.go(-1);
}
const timer = setInterval(() => {
  num.value--;
  if (num.value === 0) {
    router.go(-1);
  }
},1000)
onBeforeUnmount(()=>{
  clearInterval(timer);
})
</script>

<style lang="scss" scoped>
.error{
  width: 100%;
  height: 100%;
  background: url('@/assets/img/404.png') no-repeat center center;
  background-size: cover;
  button{
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 10px 20px;
    border: 1px solid #4ff026;
    border-radius: 5px;
    background-color: #c6f5b7;
    cursor: pointer;
    &:hover{
      background-color: #f8bbac;
    }
  }
}
</style>